Vue.defineComponent({
    props: {
        value: Boolean
    },
    data() {
        return {
            show: this.value
        }
    },
    watch: {
        value(val) {
            this.show = val
        },
        show(val) {
            this.$emit('update', val)
        }
    },
    methods: {
        confirm() {
            this.show = false
            alert('确认')
        }
    },
    template: `
    <div class="modal" id="myModal" v-if="show">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">这是标题</h2>
                <span class="close-btn" @click="show=false">&times;</span>
            </div>
            <div class="modal-body">
                <p>这是一个简单的弹窗示例。你可以在这里放置任何内容，比如表单、图片或文本。</p>
            </div>
            <div class="modal-footer">
                <button class="btn" @click="confirm">确认</button>
                <button class="btn" @click="show=false" style="background-color: #f44336;">取消</button>
            </div>
        </div>
    </div>
    `
})